import React, { useEffect, useState } from 'react'


// export default function UseEffect() {
//     const id = 0
//     useEffect(() => {
//         //组件此次渲染执行一次
//     }, [])

//     useEffect(() => {
//         //组件此次渲染执行一次,id数据发生变化进行监听
//     }, [id])

//     useEffect(() => {
//         //组件此次渲染执行一次,组件更新也会执行
//     })
//     return (
//         <div>useEffect</div>
//     )
// }



//useEffect清除副作用（定时器）
function Son() {
    useEffect(() => {
        const timer = setInterval(() => {
            console.log('son 组件执行')
        }, 1000)
        return () => {
            clearInterval(timer)
            console.log("我被清除了");
        }
    }, [])
    return (
        <div>
            <button>点击</button>
        </div>
    )
}

export default function APP() {
    const [state, setstate] = useState(false)
    return (
        <div>
            {state && <Son />}
            <button onClick={() => setstate(!state)}>显示与隐藏</button>
        </div>
    )
}